<template>
  <Modal v-model="modelIsOpen" width="450" mask :closable="false">
    <template #footer>
      <Button size="default" @click="cancel" :loading="btnLoading">取消</Button>
      <Button type="primary" size="default" :loading="btnLoading" @click="ok"
        >确定</Button
      >
    </template>
    <Space direction="vertical" size="default" type="flex">
      <zz-Label :text="title"></zz-Label>
      <zz-Form
        ref="zzForm"
        title="基本信息"
        :model="model"
        :rules="ruleValidate"
      >
        <Col span="24">
          <FormItem label="角色名称" prop="roleName">
            <Input
              v-model="model.roleName"
              placeholder="请输入..."
              clearable
            ></Input>
          </FormItem>
        </Col>

        <Col span="24">
          <FormItem label="角色编码" prop="roleCode">
            <Input
              v-model="model.roleCode"
              placeholder="请输入..."
              clearable
            ></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="管理者" prop="isManageRole">
            <RadioGroup v-model="model.isManageRole">
              <Radio label="0">
                <Icon type="logo-freebsd-devil" size="20" color="#905d93" />
                <span>否</span>
              </Radio>
              <Radio label="1">
                <Icon type="logo-freebsd-devil" size="20" color="#9cd740" />
                <span>是</span>
              </Radio>
            </RadioGroup>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem label="上级角色" prop="parentIds">
            <Cascader
              v-model="model.parentIds"
              :data="roleTree"
              change-on-select
              filterable
              :disabled="model.roleId !== ''"
            />
          </FormItem>
        </Col>
      </zz-Form>
    </Space>
  </Modal>
</template>

<script>
export default {
  name: 'addUser',
  emits: ['query'],
  props: {
    roleTree: {
      type: Array,
    },
  },
  watch: {
    modelIsOpen: {
      async handler(newVal) {
        if (newVal) {
          this.init()
        }
      },
      immediate: false,
    },
  },
  data() {
    const validateParent = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('请选择上级角色...'))
      } else {
        callback()
      }
    }
    return {
      modelIsOpen: false,
      loading: false,
      btnLoading: false,
      title: '新增角色',
      model: {
        roleId: '',
        roleCode: '',
        roleName: '',
        isManageRole: '0',
        parentIds: [],
      },
      ruleValidate: {
        roleCode: [
          {
            required: true,
            message: '用户编码不能为空...',
            trigger: 'change',
          },
        ],
        roleName: [
          {
            required: true,
            message: '用户姓名不能为空...',
            trigger: 'change',
          },
        ],
        isManageRole: [
          {
            required: true,
            message: '请选择是否为管理者...',
            trigger: 'change',
          },
        ],
        parentIds: [
          {
            required: true,
            validator: validateParent,
            trigger: 'change',
          },
        ],
      },
    }
  },
  methods: {
    // 初始化
    init() {
      if (this.$TOOL.isNotEmpty(this.model.roleId)) {
        // 编辑
        this.getParentIds()
      }
    },
    async getParentIds() {
      let param = this.model.roleId
      let res = await this.$API.roleManagement.role.getRoleParentIds.get(param)
      if (res.code == '01') {
        this.model.parentIds = res.data
      }
    },
    // 确定
    async ok() {
      // 校验
      let valid = await this.$refs.zzForm.validate()
      if (!valid) {
        return
      }
      this.btnLoading = true
      let param = this.dealParam()
      if (this.model.roleId) {
        this.modify(param)
      } else {
        this.save(param)
      }
    },
    async modify(param) {
      let res = await this.$API.roleManagement.role.modify.post(param)
      if (res.code === '01') {
        this.$Message.success('修改成功')
        this.cancel()
        this.btnLoading = false
      } else {
        this.$Message.error(res.message)
        this.btnLoading = false
      }
    },
    async save(param) {
      let res = await this.$API.roleManagement.role.save.post(param)
      if (res.code === '01') {
        this.$Message.success('保存成功')
        this.cancel()
        this.btnLoading = false
      } else {
        this.$Message.error(res.message)
        this.btnLoading = false
      }
    },
    // 组装参数
    dealParam() {
      let param = {
        ...this.model,
      }
      param['parentId'] = this.model.parentIds[this.model.parentIds.length - 1]
      return param
    },
    cancel() {
      this.modelIsOpen = false
      this.reset()
      this.$emit('query')
    },
    reset() {
      this.$refs.zzForm.resetFields()
      this.model = {
        roleId: '',
        roleCode: '',
        roleName: '',
        isManageRole: '0',
        parentIds: [],
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
